define(window.backboneCommon.getViewDefine("crowd.modalList"), function ($,require,Collection,tpl) {
    var defaultsOptions={
        customerId:"",
        submitCallback:null
    };
    var pagePrivate = {
        getDefaults :function () {
            return defaultsOptions
        },
        getOptions : function (options) {
            options=$.ExtCommon.isCheckEmpty(options)?{}:options;
            return $.ExtCommon.initMergeJson(this.getDefaults(),options);
        }
    };
    var backboneView= Backbone.View.extend({
        events: {
            "click #cbAll_modal_crowd": "selectAllCheckbox",
            "click #tb_modal_listCrowd .cb-one:checkbox": "selectOneCheckbox",
            "click #tags_selectCrowd .close": "removeSelectCheckbox",
            "click #submit_modal_crowd": "saveSubmit"
        },
        initialize: function () {
            this.listenTo(this.model, 'bind:PageList', this.bindList);
            this.render();
        },
        render:function(){
            var templateHtml=_.template(tpl);
            this.$el.html(templateHtml());
            return this;
        },
        initMain:function(options){
            this.elementModel={
                tags:$('#tags_selectCrowd'),
                cbAll:$('#cbAll_modal_crowd'),
                table:$("#tb_modal_listCrowd"),
                modal:$('#modal_crowd')
            };
            this.extObject={};
            this.pageData={initPage:false};
            this.pageOptions=$.ExtCommon.initMergeJson(pagePrivate.getOptions(),options);
            this._initInputSearch();
        },
        initPage:function (data,options) {
            data=$.ExtCommon.isCheckEmpty(data)?[]:data;
            options=$.ExtCommon.isCheckEmpty(options)?{}:options;
            this.pageOptions=$.ExtCommon.initMergeJson(this.pageOptions,options);
            this.pageData.listSelect=data;
            this.elementModel.tags.html("");
            if(!this.pageData.initPage){
                this.pageData.initPage=true;
                this._initPageList();
            }else{
                this.extObject.inputSearch.setValue("");
                this.refreshList();
            }
            this._bindSelectTags(this.pageData.listSelect,true);
            this._showModal();
        },
        _initInputSearch:function () {
            var self=this;
            self.extObject.inputSearch=$("#panel_inputSearch_crowd").ExtInputSearch({
                placeholder:"人群ID,人群名称",
                searchCallback:function () {
                    self.refreshList();
                }
            })
        },
        _initPageList: function () {
            var self=this;
            self.extObject.table=self.elementModel.table.ExtDataTable({
                pageLength: 5,
                columns: [
                    {data: null, class: "w-20"},
                    {data: "id", class: "w-60"},
                    {data: "name", class: "w-min-100"},
                    {data: "typeName", class: "w-200"}
                ],
                infoExt:{
                    ajaxDataPara:function(){
                        var param= {};
                        param.status=1;
                        if (!$.ExtCommon.isCheckEmpty(self.pageOptions.customerId)) {param.customer = self.pageOptions.customerId}
                        var keyword = self.extObject.inputSearch.getValue();
                        if (!$.ExtCommon.isCheckEmpty(keyword)) {param.search = keyword}
                        return param;
                    },
                    ajaxWholeCallback:function(param){
                        self.collection.getPageList(param)
                    },
                    trClickCallback:function(elementTr){
                        var elementCb =elementTr.find(":checkbox");
                        var b = elementCb.prop("checked");
                        elementCb.prop("checked", !b);
                        self.selectCheckbox(elementCb,!b);
                    }
                },
                createdRow: function (row, data) {
                    var info = $.ExtCommon.getListInfoByPara(self.pageData.listSelect, {id: data.id});
                    var strChecked= $.ExtCommon.isCheckEmpty(info)?"":"checked='checked'";
                    $('td', row).eq(0).html($.ExtCommon.getStringConnect('<div class="checkbox checkbox-default tr-click-invalid h-20"><input id="cb_modal_crowd_{0}" type="checkbox" class="cb-one" value="{0}" {1}><label for="cb_modal_crowd_{0}"></label></div>',[data.id,strChecked]));
                },
                drawCallback: function () {
                    self._initCheckboxAll();
                }
            });
        },
        bindList:function(){
            var data=this.model.get("dataPageList");
            this.extObject.table.ajaxWholeRefreshData(data);
        },
        refreshList: function () {this.extObject.table.refresh()},

        _initCheckboxAll:function(){
            var objCb=this.elementModel.table.find(".cb-one:checkbox");
            this.elementModel.cbAll.prop("checked",objCb.length===objCb.filter(":checked").length && objCb.length>0);
        },
        selectAllCheckbox:function (e) {
            var b=$(e.currentTarget).prop("checked");
            var list=this.extObject.table.getTabelData();
            this.elementModel.table.find("tbody :checkbox").prop("checked", b);
            this._bindSelectTags(list,b);
        },
        selectOneCheckbox:function (e) {
            var element=$(e.currentTarget);
            var b=element.prop("checked");
            this.selectCheckbox(element,b);
        },
        selectCheckbox:function (element,checked) {
            var tr=element.parents("tr:first");
            var rowData =this.extObject.table.getRowInfo(tr).data();
            this._initCheckboxAll();
            this._bindSelectTags(rowData,checked);
        },
        removeSelectCheckbox:function (e) {
            var tid=$(e.currentTarget).data("tagId");
            var id="#cb_modal_crowd_"+tid;
            var elementCb=$(id);
            if(elementCb.length>0){
                elementCb.prop("checked", false);
                this.selectCheckbox(elementCb,false);
            }else{
                this._bindSelectTags({id:tid},false);
            }
        },
        _bindSelectTags:function(list,isSelect){
            if(!$.ExtCommon.isCheckEmpty(list)) {
                list=$.type(list)==="object"?[list]:list;
                isSelect = $.ExtCommon.isCheckEmpty(isSelect) ? true : isSelect;
                if (isSelect) {
                    var tempList = [];
                    for (var i = 0; i < list.length; i++) {
                        var info = $.ExtCommon.getListInfoByPara(this.pageData.listSelect, {id: list[i].id});
                        if ($.ExtCommon.isCheckEmpty(info)) {tempList.push(list[i]);}
                    }
                    var strHtml = $.ExtCommon.isCheckEmpty(tempList) ? "" : $.map(tempList, function (item) {
                        return '<span class="tag">' + item.name + '<button class="close" type="button" data-tag-id="' + item.id + '"><span>×</span></button></span>';
                    }).join("");
                    if (strHtml.length > 0) {
                        this.elementModel.tags.append(strHtml);
                        this.pageData.listSelect = this.pageData.listSelect.concat(tempList);
                    }
                } else {
                    for (var ir = 0; ir < list.length; ir++) {
                        var rId = list[ir].id;
                        this.pageData.listSelect = $.ExtCommon.getRemoveListByJosn(this.pageData.listSelect, {id: rId});
                        this.elementModel.tags.find("button[data-tag-id='" + rId + "']").parent().empty().remove();
                    }
                }
            }
            if(this.elementModel.tags.children().length===0){
                this.elementModel.tags.parent().hide()
            }else{
                this.elementModel.tags.parent().show()
            }
        },

        _checkForm:function () {},
        saveSubmit:function () {
            this._hideModal();
            if(this.pageOptions.submitCallback){this.pageOptions.submitCallback(this.pageData.listSelect)}
        },
        _showModal:function(){
            this.elementModel.modal.modal("show");
            $.ExtAssist.modal.computeTop(this.elementModel.modal);
        },
        _hideModal: function () {
            this.elementModel.modal.modal("hide");
        }
    });
    var viewModel=function(options){
        this.collection= new Collection();
        this.model=this.collection.model;
        this.view=new backboneView({el:options.pElement,collection:this.collection,model:this.model});
        this.view.initMain(options);
    };
    viewModel.prototype={
        init:function (data,options) {
            this.view.initPage(data,options);
        }
    };
    return viewModel;
});